<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

  <title>个人中心</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/common.css">

  <link rel="stylesheet" href="css/logintest.css">
  <link rel="stylesheet" href="css/header.css">
  <!-- 引入我们的favicon首页图标 -->
  <link rel="shortcut icon" href="favicon.ico" />
  <script src="js/jquery-3.6.0.min.js">
  </script>
</head>

<body>

<header>
  <ul>
    <li><a href="index.jsp">Myshopping商城</a></li>
           		<c:if test="${empty loginUser}">
                  <li><a href="login.jsp" >登录</a></li>
                  <li><a href="register.jsp" >注册</a></li>
                </c:if>
       			<c:if test="${not empty loginUser}">
                  <li><a href="user?method=selectUserByUid" >${loginUser.username}</a></li>
                  <li><a href="user?method=logOut">注销</a></li>
                  <li><a href="order?method=show" >我的订单</a></li>
                  <li><a href="address?method=show">地址管理</a></li>
                </c:if>
    <li><a href="${pageContext.request.contextPath}/cart?method=show&uid=${loginUser.uid}" id="shorpcar">购物车</a></li>
  </ul>
</header>
<div class="container">
  <h1>个人信息</h1>
  <form action="user?method=modifyUser" method="post" onsubmit="return checkinput();">
    <input type="text" class="tbx" placeholder="用户名" name="username" id="username" value="${user.username}" readonly="readonly">
    <input type="text" class="tbx" placeholder="性别" name="usex" id="usex" value="${user.usex}">
    <input type="text" class="tbx" placeholder="邮箱" name="uemail" id="email" value="${user.email}">
    <input type="text" class="tbx" placeholder="密码" name="upassword" id="upassword" value="" >
    <input type="submit" class="sub" onclick="validate()">
  </form>
</div>
<script>

  // 定义一个con绑定.container
  const con = document.querySelector('.container');

  // 定义两个函数开关（门）
  let isIn = true; // 鼠标进去的门，默认打开
  let isOut = false; // 鼠标出去的门，默认关闭

  var span; // 给未出生的元素取个名字span

  // 添加监听
  // 监听鼠标进去的事件
  con.addEventListener('mouseenter', (e) => {
    // 如果进去的门是打开的，就可以执行这个函数
    if (isIn) {
      // 获取进入的鼠标位置
      // 生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
      let inX = e.clientX - e.target.offsetLeft;
      let inY = e.clientY - e.target.offsetTop;

      // 创建一个span元素，并且给它对应的出生坐标
      let el = document.createElement('span');
      el.style.left = inX + 'px';
      el.style.top = inY + 'px';
      // 添加到con对应的父元素，即container
      con.appendChild(el);

      $('.container span').removeClass('out'); // 移除出去的动画
      $('.container span').addClass('in'); // 添加进入的动画
      span = document.querySelector('.container span');
      isIn = false; // 关闭进来的门（不能使用进入的方法）
      isOut = true; // 打开出去的门（可以使用出去的方法）
    }
  })
  // 监听鼠标出去的事件
  con.addEventListener('mouseleave', (e) => {
    if (isOut) {
      // 获取出去的鼠标位置
      // 生成元素的位置=出去点距离窗口的距离-父盒子距离窗口的距离
      let outX = e.clientX - e.target.offsetLeft;
      let outY = e.clientY - e.target.offsetTop;

      $('.container span').removeClass('in'); // 移除进入的动画
      $('.container span').addClass('out'); // 添加出去的动画
      // 添加出去的坐标
      $('.out').css('left', outX + 'px');
      $('.out').css('top', outY + 'px');

      isOut = false; // 关闭出去的门
      // 当动画结束后再删除元素
      setTimeout(() => {
        con.removeChild(span); // 删除元素
        isIn = true; // 打开进入的门
      }, 500);
    }
  })
  $(document).ready(function(){
    $.ajax({
      url:"${pageContext.request.contextPath}/type?method=findAll",
      type:"GET",
      dataType:"json",
      success:function(data){
        for(var i in data){
          var a = $("<a href='${pageContext.request.contextPath}/product?method=show&tid="+data[i].tid+"'>"+data[i].tname+"</a>");
          $("#goodsType").append(a);

        }
      },
      error:function(){
        alert("失败");
      }
    })
  })

  var a = true;
  function validate(){
    var username = document.getElementById("username").value;
    var usex = document.getElementById("usex").value;
    var email = document.getElementById("email").value;
    var upassword = document.getElementById("upassword").value;
    if(username==""){
      alert("用户名不能为空");
      a= false;
      return;
    }else if(!(usex === "男" || usex === "女")){
      alert("没有："+usex+"这种性别哦！请填写男或女");
      a= false;
      return;
    } else if(!emailCheck(email)){
      a= false;
      return;
    }else if(upassword==""){
      alert("密码不能为空");
      a= false;
      return;
    }
    else{
      a=true;
    }
  }
  function checkinput(){
    return a;
  }

  function emailCheck (emailStr) {
    // alert(emailStr);
    var emailPat=/^(.+)@(.+)$/;
    var matchArray=emailStr.match(emailPat);
    if (matchArray==null) {
      alert("电子邮件地址必须包括 ( @ 和 . )")
      return false;
    }
    return true;
  }
</script>
</body>

</html>